<template>
    <div class="app-container">
        <main class="mb-2">
            <div>
                <el-divider content-position="left">填写学员信息</el-divider>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" inline label-width="80px" size="small ">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="证件地址" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="教练" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="车型" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="挂靠点" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="name">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="增驾" prop="name" label-width="190px">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="是"></el-radio>
                            <el-radio label="不是"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="ml-6">
                        <el-button type="primary">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </main>

        <footer>
            <div class="grid_wrapper">
                <h3>身份证正面<span style="color: red;">*(必填项)</span></h3>
                <div class="grid_item">
                    <div class="grid_item_img">
                        <div class="demo"><span>示例</span></div>
                        <img src="http://jx.qida999.com/drivercommon/dr_person_ready/img/zp1.png" alt="身份证正面">
                    </div>
                    <div class="update">
                        <el-upload drag action="#" :auto-upload="false" list-type="picture-card" :limit="1"
                            :file-list="fileList" :on-change="addFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="grid_wrapper">
                <h3>身份证反面<span style="color: red;">*(必填项)</span></h3>
                <div class="grid_item">
                    <div class="grid_item_img">
                        <div class="demo"><span>示例</span></div>
                        <img src="http://jx.qida999.com/drivercommon/dr_person_ready/img/zp2.png" alt="身份证反面">
                    </div>
                    <div class="update">
                        <el-upload drag action="#" :auto-upload="false" list-type="picture-card" :limit="1"
                            :file-list="fileList" :on-change="addFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="grid_wrapper">
                <h3>半身照<span style="color: red;">(选填项)</span></h3>
                <div class="grid_item">
                    <div class="grid_item_img">
                        <div class="demo"><span>示例</span></div>
                        <img src="http://jx.qida999.com/drivercommon/dr_person_ready/img/zp3-101.jpg" alt="半身照">
                    </div>
                    <div class="update">
                        <el-upload drag action="#" :auto-upload="false" list-type="picture-card" :limit="1"
                            :file-list="fileList" :on-change="addFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="grid_wrapper">
                <h3>白底半身照<span style="color: red;">(选填项)</span></h3>
                <div class="grid_item">
                    <div class="grid_item_img">
                        <div class="demo"><span>示例</span></div>
                        <img src="http://jx.qida999.com/drivercommon/dr_person_ready/img/zp4-101.jpg" alt="白底半身照">
                    </div>
                    <div class="update">
                        <el-upload drag action="#" :auto-upload="false" list-type="picture-card" :limit="1"
                            :file-list="fileList" :on-change="addFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="grid_wrapper">
                <h3>半身照2<span style="color: red;">(选填项)</span></h3>
                <div class="grid_item">
                    <div class="grid_item_img">
                        <div class="demo"><span>示例</span></div>
                        <img src="http://jx.qida999.com/drivercommon/dr_person_ready/img/zp5.png" alt="半身照2">
                    </div>
                    <div class="update">
                        <el-upload drag action="#" :auto-upload="false" list-type="picture-card" :limit="1"
                            :file-list="fileList" :on-change="addFile">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                    </div>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="40%">
                <img :src="dialogImageUrl" alt="">
            </el-dialog>
        </footer>


    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-12-12 09:42:26  星期二
* @description   pc端预录入
**/


export default {
    name: 'winprenter',
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: '',
            fileList: [],
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleRemove(file) {
            this.fileList = []
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        addFile(file, fileList) {
            this.fileList = fileList
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 10px;

    footer {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;

        & .grid_wrapper:nth-child(even) {
            margin-right: 0;
        }

        .grid_wrapper {
            width: 820px;
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-right: 10px;
            margin-bottom: 10px;

            h3 {
                // margin-left: 10px;
                padding: 0 0 10px 10px;
                border-bottom: 1px solid #ddd;
            }

            .grid_item {
                display: flex;
                padding: 10px 0 10px 10px;

                .grid_item_img {
                    position: relative;
                    width: 180px;
                    height: 180px;
                    margin-right: 10px;
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;

                    .demo {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 45px;
                        height: 30px;
                        background-color: #409eff;
                        text-align: center;
                        line-height: 30px;
                        border-radius: 6px;

                        span {
                            display: inline-block;
                            border-color: #409eff;
                            color: #fff;
                            font-size: 12px;
                        }
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .update {
                    ::v-deep .el-upload-dragger {
                        line-height: normal;
                    }

                    ::v-deep .el-upload--picture-card {
                        border: none;
                    }

                    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
                        width: 180px;
                        height: 180px;
                    }
                }
            }
        }
    }
}
</style>